<#-- 引入布局指令的命名空间 -->
<#import "layout/base.ftl" as defaultLayout>

<#-- 调用布局指令 -->
<@defaultLayout.layout>

    <div class="col-sm-6">
        <div class="box">
            <div class="box-header">
                <h3>TOP10电影热度分析</h3>
                <small class="block text-muted">根据电影正向评论数进行排名的树状图</small>
                <div id="mountNode"></div>
                <script>
                    var sortType = 'positive';
                    var data = [
                    <#list data as item>
                        {
                            type: '${item.movie}',
                            value: ${item.userCount}
                        },
                    </#list>
                     ];
                    var chart = new G2.Chart({
                        container: 'mountNode',
                        forceFit: true,
                        height: window.innerHeight,
                        padding: [20, 40, 50, 124]
                    });
                    chart.source(data, {
                        value: {
                            max: 500,
                            min: 0,
                            nice: false,
                            alias: '评论数'
                        }
                    });
                    chart.axis('type', {
                        label: {
                            textStyle: {
                                fill: '#8d8d8d',
                                fontSize: 12
                            }
                        },
                        tickLine: {
                            alignWithLabel: false,
                            length: 0
                        },
                        line: {
                            lineWidth: 0
                        }
                    });
                    chart.axis('value', {
                        label: null,
                        title: {
                            offset: 30,
                            textStyle: {
                                fontSize: 12,
                                fontWeight: 300
                            }
                        }
                    });
                    chart.legend(false);
                    chart.coord().transpose();
                    chart.interval().position('type*value').size(26).opacity(1).label('value', {
                        textStyle: {
                            fill: '#8d8d8d'
                        },
                        offset: 10
                    });
                    chart.render();
                    $('.sort-button').click(function() {
                        sortType = sortType === 'positive' ? 'negative' : 'positive';
                        sortData(sortType);
                        chart.repaint();
                    });
                    function sortData(sortType) {
                        if (sortType === 'positive') {
                            data.sort(function(a, b) {
                                return b.value - a.value;
                            });
                        } else {
                            data.sort(function(a, b) {
                                return a.value - b.value;
                            });
                        }
                    }
                </script>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="box">
            <div class="box-header">
                <h3>TOP10电影排名</h3>
            </div>
            <div class="table-responsive">
                <table class="table table-striped b-t">
                    <thead>
                    <tr>
                        <th style="width:20px;">
                            <label class="ui-check m-a-0">
                                <input type="checkbox"><i></i>
                            </label>
                        </th>
                        <th>电影名称</th>
                        <th>评论热度</th>
                    </tr>
                    </thead>
                    <tbody>
                    <#list data as item>
                        <tr>
                            <td><label class="ui-check m-a-0"><input type="checkbox" name="post[]"><i class="dark-white"></i></label></td>
                            <td>${item.movie}</td>
                            <td>${item.userCount}</td>
                        </tr>
                    </#list>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</@defaultLayout.layout>